import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";

// 需要切换的组件，不需要引到父组件，而是引到路由表
import Home from "@/pages/Home.vue";
import Classify from "@/pages/Classify.vue";
import Mine from "@/pages/Mine.vue";
import Mine2 from "@/pages/Mine2.vue";
import Detail from "@/pages/Detail.vue";
import NotFound from "@/pages/NotFound.vue";

import Hot from "@/pages/Hot.vue";
import Cinema from "@/pages/Cinema.vue";

// 用组件生成路由表
const routes = [
  {
    // 重定向
    // 当url匹配到“/”的时候，让他自动加上/home
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    component: Home,
    // children属性用于做嵌套路由,是数组
    // RouterLink和RouterView标签都是可以嵌套的
    children: [
      {
        path: "/home",
        redirect: "/home/hot",
      },
      {
        // path的hot相当于/home/hot
        path: "hot",
        component: Hot,
      },
      {
        path: "/home/cinema",
        component: Cinema,
      },
    ],
  },
  {
    path: "/classify",
    name: "classify",
    component: Classify,
  },
  {
    // 命名视图，用一个url来显示多个组件
    // 要将component换成components
    path: "/mine",
    // alias表示别名
    alias: "/my",
    // component: Mine,
    components: {
      Mine,
      Mine2,
    },
  },
  {
    // 动态路由匹配
    // /detail/vtftyfyt,都能匹配到这个组件
    // 动态路由匹配可以用于路由之间的传参
    // 在对应的页面，可以通过this.$route.params.id的方式来获取到参数
    path: "/detail/:id",
    name: "detail",
    component: Detail,
  },
  // 匹配404页面
  // 固定写法，一般写在整个路由表的最后
  // { path: "/:pathMatch(.*)*", component: NotFound },
  { path: "/:pathMatch(.*)*", redirect: "/home" },
];

// 用路由表生成路由实例

// 路由一共有两种模式
// hash模式，用createWebHashHistory方法，url上面会有#
// url不好看，SEO优化不好

// history模式，用createWebHistory方法，url上面没有#
// 当项目放到服务器以后，如果后端没有做处理，那么用户在刷新页面的时候，或者手动修改url的时候，就会出现404的报错
const router = createRouter({
  // history: createWebHistory(import.meta.env.BASE_URL),
  history: createWebHashHistory(),
  routes,
});

export default router;
